<template>
  <div class="wrap">
    <span>正</span>
    <span>在</span>
    <span>加</span>
    <span>载</span>
    <span>中</span>
    <span>.</span>
    <span>.</span>
    <span>.</span>
  </div>
</template>

<style lang="stylus" scoped>
.wrap
  height 100vh
  display flex
  align-items center
  justify-content center
  background-color #000
  position relative
  span
    color #fff
    font-size 2em
    position relative
    display inline-block
    animation mymove 1s ease-in-out infinite
    animation-delay calc(.1s*var(--i))
    -webkit-box-reflect below -8px linear-gradient(transparent, rgba(0, 0, 0, 0.2))
    &:nth-child(0)
      --i 1
    &:nth-child(1)
      --i 2
    &:nth-child(2)
      --i 3
    &:nth-child(3)
      --i 4
    &:nth-child(4)
      --i 5
    &:nth-child(5)
      --i 6
    &:nth-child(6)
      --i 7
    &:nth-child(7)
      --i 8
@keyframes mymove
  0%
    transform translateY(0)
  20%
    transform translateY(-24px)
  40%, 100%
    transform translateY(0)
</style>
